<template>
  <div id="asides">
    <aside>
      <ul class="list">
        <li class="active">发现音乐</li>
        <li>视频</li>
        <li>朋友</li>
        <li>直播</li>
        <li>私人FM</li>
      </ul>
      <p class="my-songs">我的音乐</p>
      <div class="local-music flex_start">
        <div class="icon"><img src="./img/musicicon .png" alt="" /></div>
        <p>本地音乐</p>
      </div>
      <div class="download-management flex_start">
        <div class="icon"><img src="./img/download.png" alt="" /></div>
        <p>下载管理</p>
      </div>
      <el-menu class="el-menu-vertical-demo" :default-openeds="['1','2']">
        <el-submenu index="1">
          <template slot="title">
            <span>创建的歌单</span>
          </template>
          <!-- <el-menu-item index="1-1">选项1</el-menu-item> -->
        </el-submenu>
        <el-submenu index="2" >
          <template slot="title">
            <span>收藏的歌单</span>
          </template>
          <el-menu-item
            class="nowrap"
            :index="'2-' + index"
            v-for="(item, index) in $store.state.personalPlaylist"
            :key="index"
            v-if="$store.state.personalPlaylist"
            @click="skipSongList(index)"
            ><Icon type="md-musical-notes" /><span>{{
              item.name
            }}</span></el-menu-item
          >
        </el-submenu>
      </el-menu>
    </aside>
  </div>
</template>

<script>
export default {
  name: "asides",
  data() {
    return {};
  },
  methods: {
    skipSongList(index) {
      this.$router.push({
        path: "/homepage/contents/rankdetail?timetamp=" + new Date().getTime(),
        query: {
          detail: this.$store.state.personalPlaylist[index],
          id: this.$store.state.personalPlaylist[index].id,
        },
      });
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
aside {
  width: 100%;
  min-height: 1000px;
  height: 100%;
  border-right: 1px solid rgba(0, 0, 0, 0.2);
  padding: 0 15px;
  box-sizing: border-box;
}
.list {
  padding-top: 15px;
}
.list li {
  height: 37px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-size: 16px;
  padding-left: 10px;
  cursor: pointer;
}
.list li:hover {
  background-color: #f5f5f5;
  color: #000;
}
.list li.active {
  font-weight: bold;
  background-color: #f5f5f5;
  border-radius: 5px;
}
.my-songs {
  padding-left: 10px;
  margin-top: 20px;
  color: #a6a6a6;
}
.local-music,
.download-management {
  padding: 10px 0;
  padding-left: 10px;
  cursor: pointer;
}
.local-music:hover,
.download-management:hover {
  background-color: #f5f5f5;
  color: #000;
}
.local-music .icon,
.download-management .icon {
  width: 13px;
  height: 13px;
  overflow: hidden;
  margin-right: 15px;
}
.creat-song-list {
  margin-top: 20px;
  padding-left: 10px;
}
.creat-song-list .left p {
  color: #a6a6a6;
}
.creat-song-list .left .icon {
  width: 12px;
  height: 12px;
  overflow: hidden;
}
.creat-song-list .right {
  font-size: 20px;
}
</style>
